<template>
  <div class="avue-contail"
       :class="{'avue--collapse':isCollapse}">
    <screenshot></screenshot>
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top" />
    </div>

    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar />
      </div>
      <div class="avue-main" :class="{'avue-main--fullscreen': !isMenu, 'avue-main--noFullscreen': isMenu}">
        <!-- 顶部标签卡 -->
        <tags />
        <transition name="fade-scale">
          <search class="avue-view"
                  v-show="isSearch"></search>
        </transition>
        <!-- 主体视图层 -->
        <div style="height:100%;overflow-y:auto;overflow-x:hidden;"
             id="avue-view"
             v-show="!isSearch">
          <router-view class="avue-view" />
        </div>
      </div>
    </div>
    <div class="avue-shade"
         @click="showCollapse"></div>
  </div>
</template>

<script>
import {
  mapGetters, mapState
} from "vuex";
import tags from "./tags";
import screenshot from './screenshot';
import search from "./search";
import top from "./top/";
import sidebar from "./sidebar/";
import admin from "@/util/admin";
import {
  validatenull
} from "@/util/validate";
import {
  calcDate
} from "@/util/date.js";
import {
  getStore
} from "@/util/store.js";
import store from '@/store/';
export default {
  components: {
    top,
    tags,
    search,
    sidebar,
    screenshot
  },
  name: "index",
  provide () {
    return {
      index: this
    };
  },
  data () {
    return {
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: ""
    };
  },
  created () {
    //实时检测刷新token
    this.refreshToken();

    if (!this.showMenu){
      this.openMenu();
    }
  },
  mounted () {
    this.init();
  },
  computed: {
      ...mapState({
          showMenu: state => state.common.showMenu
      }),
      ...mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu", 'userInfo', 'token', 'tokenType'])
  },
  props: [],
  methods: {
    showCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    // 屏幕检测
    init () {
      //创建全局水印
      // window.watermark = this.watermark({
      //   text: `${this.userInfo.username}-${this.userInfo.loginId}`
      // })
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
    },
    //打开菜单
    openMenu: function (item, callback) {
      this.$store.dispatch("GetMenu", item ? item.id : "").then(data => {
        let wel = null;
        if (item && item.router){
          const router = this.$router.getRoutes().find(route => route.path === item.router);
          wel = {
            label: router.name,
            value: item.router,
            params: {},
            query: {},
            meta: {
              i18n: router.meta.i18n
            },
            group: [],
            code: '',
            close: false
          }
        }

        this.$store.commit('DEL_ALL_TAG', wel);
        this.$router.$avueRouter.formatRoutes(data, true);
        if (callback) {
          callback();
        }
      });
    },
    refreshToken () {

      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "token",
          debug: true
        }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        //提前一分钟去刷新
        if (date.seconds >= (store.getters.expiresIn-(1*60)) && !this.refreshLock) {
          this.refreshLock = true;
          this.$store.dispatch("RefeshToken")
            .then(() => {
            })
            .finally(() => {
              this.refreshLock = false;
            });
        }
      }, 1000);
    }
  }
};
</script>
